<template>
<div id="mains">
    <header-tab class="f" v-if="$store.state.footerTab.footerTabFlag" title="电影"/>
    <footer-tab v-if="$store.state.footerTab.footerTabFlag"/>

    <div id="contents" v-if="$store.state.footerTab.footerTabFlag">
        <!-- 影片轮播 -->
        <my-swiper :key="filmCarouselList.length" ref="filmSwiper">
            <div class="swiper-slide" v-for="item in filmCarouselList" :key="item.channelid">
                <img :src="item.thumb" class="bg" :alt="item.thumb">
            </div>
        </my-swiper>

        <!-- 影片列表头部 -->
        <div class="film-header-fa">
			<div class="film-header" :class="isFixed?'isFixed':''">
				<router-link class="showing" tag="div" to="/cinema/showingup">正在热映</router-link>
				<router-link class="coming" tag="div" to="/cinema/upcoming">即将上演</router-link>
			</div>
        </div>

        <!-- 影片列表 -->
		<div style="overflow: auto;">
			<transition mode="out-in">
				<!-- 使用 vuex actions 异步更新 缓冲数据 -->
				<router-view/>
			</transition>
		</div>
    </div>

    <!-- 影片详情 -->
    <router-view name="filmDetail"/>
</div>
</template>

<script>
const HeaderTab = () => import("@/components/HeaderTab")
const FooterTab = () => import("@/components/FooterTab")
const MySwiper = () => import("@/components/Swiper")
export default {
    name: "cinema",
	data() {
		return {
			filmCarouselList: [],
			isFixed: false
		}
	},
	mounted() {
		this.getFilmCarouselList()
		
		window.onscroll = this.getFilmScroll
	},
	methods: {
		// 吸顶
		getFilmScroll() {
			let scrollTop = document.documentElement.scrollTop || document.body.scrollTop
			let swiperHeight = this.$refs.filmSwiper? this.$refs.filmSwiper.$el.offsetHeight : 200
			if(scrollTop>=swiperHeight) {
				this.isFixed = true
				
			} else {
				this.isFixed = false
			}
		},
		
		// film carousel
		getFilmCarouselList() {
			this.axios.get("https://api.apiopen.top/musicBroadcasting").then(res => {
				// console.log(res.data)
				let list = res.data.result[0].channellist.filter((item, i) => i < 5)
				// console.log(list);
				if(res.data.code === 200) {
		            setTimeout(() => {
		                this.filmCarouselList = list;
		                this.flag = true
		            }, 300)
				}
			}).catch(err => {
				console.log(err)
			})
		}
	},
	watch: {
	    "$route.path": function(newVal, oldVal) {
			document.body.scrollTop = document.documentElement.scrollTop = 0
	        if(newVal === '/cinema/showingup' || newVal === '/cinema/upcoming') {
	            this.isFixed = false;
	            window.onscroll = this.getFilmScroll
	        }
	    }   
	},
    components: {
        HeaderTab,
        FooterTab,
        MySwiper
    }
}
</script>

<style scoped>
#mains .f {
	position: fixed;
    top: 0;
}
#contents {
	overflow: initial;
    margin-top: 50px;
    box-shadow: 0 -5px 10px #bfbfbf;
}
#contents .film-header-fa {
	height: 50px;
}
#contents .film-header {
    display: flex;
    width: 100%;
	max-width: 768px;
    height: 48px;
    line-height: 48px;
    justify-content: space-between;
    align-items: center;
    background: white;
    box-shadow: 0 1px 5px #acaaaa;
    z-index: 50;
}
#contents .film-header .showing,
#contents .film-header .coming {
    flex: 1;
    display: flex;
    justify-content: center;
    height: 100%;
    line-height: 45px;
    border-bottom: 2px solid transparent;
    color: #5a5353;
    font-size: 16px;
    font-weight: bold;
}
#contents .film-header .showing:hover,
#contents .film-header .coming:hover {
    cursor: pointer;
    background-color: #e7e7e7;
}
#contents .film-header .router-link-active{
    color: #0045ac;
	border-bottom: 2px solid #0e60c3;
    box-shadow: 0 1px 4px #72b2ff;
}
#contents .bg {
    width: 100%;
    height: 100%;
}
.isFixed {
    position: fixed;
    top: 50px;
    z-index: 50;
}

.v-enter {
    opacity: 0;
    transform: translateX(100%);
}
.v-leave-to {
    opacity: 0;
    transform: translateX(-100%);
}
.v-enter-active,
.v-leave-active {
    transition: all .3s ease;
}
</style>